<template>
  <div class="home">

    <div class="header">
      <div class="userinfo">
        <div class="face">
          <img :src="info.avatar">
        </div>
        <div class="info">{{info.name}}</div>
        <div class="phone">{{info.phone}}</div>
        <div class="genre">
          <span>{{info.departmentName}}</span>
          <span>{{info.postName}}</span>
          <span>{{info.teamName}}</span>
        </div>
      </div>
      <div class="setting" @click="modification">
        <img src="../../assets/shezhi.png">
      </div>
    </div>
    <div class="orders">
      <div class="box">
        <div class="label" @click="deafts">
          <div class="icon">
            <div class="badge">{{info.draf}}</div>
            <img src="../../assets/zu1.png">
          </div>
          <div class="text">草稿箱</div>
        </div>

        <div class="label" @click="backlog">
          <div class="icon">
            <div class="badge">{{info.task}}</div>
            <img src="../../assets/zu2.png">
          </div>
          <div class="text">待办事务</div>
        </div>

        <div class="label" @click="hasTransition">
          <div class="icon">
            <!--<div class="badge">1</div>-->
            <img src="../../assets/zu3.png">
          </div>
          <div class="text">已办事物</div>
        </div>
      </div>
    </div>
    <div class="list_box">
      <div class="listst">
       <!-- <div class="list">
          <div class="list_back">
            <span class="list_text">委托</span>
            <span class="list_img"><img src="../../assets/right.png"></span>
          </div>
        </div>-->
        <div class="list" @click="regulatory">
          <div class="list_back">
            <span class="list_text">制度规范</span>
            <span class="list_img"><img src="../../assets/right.png"></span>
          </div>
        </div>

        <div class="list" @click="fishlist">
          <div class="list_back">
            <span class="list_text">鱼缸基本信息管理</span>
            <span class="list_img"><img src="../../assets/right.png"></span>
          </div>
        </div>
      </div>
    </div>
    <FootTab></FootTab>

  </div>
</template>

<script>
  import FootTab from '../../components/footTab.vue'
  import { getUserAllInfo } from '../../api/index.js'
  export default {
    data () {
      return {
        value: '',
        info:''
      }
    },
    methods: {
      async getinfo () {
        let msg = await getUserAllInfo()
        // debugger
        this.info = msg.data
      },
      //信息设置
      modification () {
        this.$router.push({path: '/modification'})
      },
      //草稿箱
      deafts(){
        this.$router.push({path: '/drafts'})
      },
      //待办事务
      backlog(){
        this.$router.push({path: '/backlog'})
      },
      //已办事务
      hasTransition(){
        this.$router.push({path: '/hastransaction'})
      },
      //规章制度
      regulatory(){
        this.$router.push({path: '/regulatory'})
      },
      fishlist(){
        this.$router.push({path: '/fishlist'})
      }
    },
    mounted(){
        this.getinfo()
    },
    components: {
      FootTab
    }
  }


</script>
<style>
  body {
    width: 100%;
    height: 100%;
    position: relative;
    background: #ebebeb
  }

</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .home
    .header
      background-image: linear-gradient(#00BAFF, #0B9BEE);
      border-radius: 0 0 30px 30px
      width: 92%;
      height: 66vw;
      padding: 26px 4%;
      display: flex;
      -webkit-box-align: center;
      .setting
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        img
          width: 100%;
          height: 100%;
      .userinfo
        margin: 80px auto;
        .face
          width: 150px;
          height: 150px;
          flex-shrink: 0;
          padding-bottom 40px;
          margin: 0 auto;
          img
            width 100%
            height 100%
            border-radius: 100%;
            border: 5px solid #ffffff;
        .info
          color: #ffffff
          font-size 40px;
          text-align center
          margin-bottom 20px;
        .phone
          color: #ffffff;
          font-size 32px;
          text-align center
          margin-bottom 30px
        .genre
          font-size 28px;
          color: #ffffff;
          font-family: "SimHei"
          span
            border 1px solid #ffffff;
            padding: 3px 8px
    .orders
      /*background-image: linear-gradient(#00BAFF, #0B9BEE);*/
      width: 92%;
      padding: 0 4%;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
      border-radius: 0 0 100% 100%;
      margin-top: 0.5px;
      .box
        margin-top: -30px;
        width: 98%;
        padding: 0 1%;
        height: 30vw;
        background-color #fefefe
        border-radius: 12px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        margin-bottom: 20px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .label
          text-align: center;
          display block
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-flex-flow: wrap;
          flex-flow: wrap;
          width: 100%;
          height: 20vw;
          color: #666666;
          font-size: 13px;
          .icon
            position: relative;
            width: 70px;
            height: 70px;
            margin: 20px auto;
            .badge
              position: absolute;
              width: 4vw;
              height: 4vw;
              background-color: #D61E2C;
              top: -1vw;
              right: -1vw;
              border-radius: 100%;
              font-size: 20px;
              color: #fff;
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              z-index: 10;
            img
              width: 70px;
              height: 70px;
              z-index: 9;
              display: block;
              position: absolute;
              top: 0;
              left: 0;
          .text
            font-size 26px;
            font-weight 600
    .list_box
      width: 92%;
      padding: 0 4%;
      .listst
        background-color: #fefefe;
        border-radius 14px
        .list
          width: 98%;
          padding: 0 1%;
          font-size 30px;
          .list_back
            display: flex;
            padding: 30px;
            border-bottom: 1px solid #e5e5e5;
            .list_text
              flex 8
            .list_img
              img
                height: 32px
</style>
